<template>
  <div style="height: 100%; line-height: 60px;">
    <template v-if="$store.getters.getToken === null">
      <el-link :underline="false" @click="dialog = true; dialogTitle = '登录'">登录</el-link>
      <el-divider direction="vertical"></el-divider>
      <el-link :underline="false" @click="dialog = true; dialogTitle = '注册'">注册</el-link>
    </template>
    <template v-else>
      <el-dropdown placement="bottom" @command="logout">
        <span class="el-dropdown-link" style="font-size: 1.2em;">
          {{ $store.getters.getUsername }}
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item icon="el-icon-close">注销</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </template>
    <!-- 登录和注册对话框 -->
    <el-dialog :visible.sync="dialog" width="30%" :close-on-click-modal="false"
               @closed="closeDialog" @opened="openDialog">
      <div slot="title" style="font-size: 1.3em">
        <span>{{ dialogTitle }}</span>
      </div>
      <el-form :model="form" label-position="top" size="small">
        <el-form-item label="用户名" label-width="50px">
          <el-input v-model="form.username" :autofocus="true" ref="usernameInput"></el-input>
        </el-form-item>
        <el-form-item label="密码" label-width="50px">
          <el-input v-model="form.password" type="password" :autofocus="true"></el-input>
        </el-form-item>
        <el-form-item label="验证码" label-width="50px">
          <div style="display: flex;">
            <el-input v-model="form.code" :autofocus="true" style="width: 40%;"></el-input>
            <img :src="imgPath" @click="changeCode">
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="dialog = false">取消</el-button>
          <el-button type="primary" @click="confirm" :disabled="buttonDisabled">{{ dialogTitle }}</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>

import {login, logout, register} from "@/api/user";
import {addRecentConnect} from "@/api/recentConnect";

export default {
  name: 'Header',
  data() {
    return {
      dialog: false,
      dialogTitle: '',
      form: {
        username: null,
        password: null,
        code: null
      },
      buttonDisabled: true,
      imgPath: null
    }
  },
  watch: {
    form: {
      handler(newValue) {
        this.buttonDisabled = !((newValue.username !== null && newValue.username !== '')
            && (newValue.password !== null && newValue.password !== '')
            && (newValue.code !== null && newValue.code !== ''));
      },
      deep: true
    },
  },
  methods: {
    closeDialog() {
      this.form = {
        username: null,
        password: null,
        code: null
      }
      this.dialog = false
      this.buttonDisabled = true
    },
    openDialog() {
      this.changeCode()
      this.$refs.usernameInput.focus();
    },
    confirm() {
      if (this.dialogTitle === '登录') {
        // login
        login(this.form.username, this.form.password, this.form.code).then(res => {
          this.dialog = false
          this.$message({
            message: '登录成功！',
            type: 'success'
          })
          this.$store.dispatch('SetToken', res.data.token)
          this.$store.dispatch('SetUsername', res.data.username)
          if (this.$store.getters.getConnectionId !== null) {
            // 添加连接记录
            addRecentConnect(this.$store.getters.getConnectionId)
          }
        }).catch(() => {
          this.changeCode()
        })
      } else {
        // register
        register(this.form.username, this.form.password, this.form.code).then(() => {
          this.dialog = false
          this.$message({
            message: '恭喜你，注册成功！',
            type: 'success'
          })
        }).catch(() => {
          this.changeCode()
        })
      }
    },
    logout() {
      logout().then(() => {
        this.$store.dispatch('SetToken', null)
        this.$store.dispatch('SetUsername', null)
        this.$message({
          message: '注销成功！',
          type: 'success'
        })
      })
    },
    changeCode() {
      // 验证码获取
      this.imgPath = "http://localhost:8888/api/user/getCode?time=" + new Date().getTime()
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}
</style>
